<template>
  <div class="index">
    <commonHeader></commonHeader>

    <div class="swiper-wrap">
      <swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
        ref="mySwiper">
        <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div class="banner-text">
        <div class="text">慈善是爱的最高境界</div>
        <div class="introduct">
          惠元爱心慈善起于细微归于深广，每一次的心手相牵，都是孩子们生命中的一束光。一束光亮的能力或许是微小的，但千万束光芒就能照亮孩子们的天空。
        </div>
      </div>
    </div>

    <!-- <div class="banner" v-if="ListBanner.length == 1">
      <img class="banner-img" :src="ListBanner[0].banner" alt="">
      <div class="banner-text">
        <div class="text">慈善是爱的最高境界</div>
        <div class="introduct">
          惠元爱心慈善起于细微归于深广，每一次的心手相牵，都是孩子们生命中的一束光。一束光亮的能力或许是微小的，但千万束光芒就能照亮孩子们的天空。
        </div>
      </div>
    </div> -->



    <div class="history wow fadeInUp">
      <div class="tit">惠元慈善大事记</div>
      <div class="swiper-wrap2">
        <swiper :options="swiperOption1" class="swiper-container" ref="mySwiper1" v-if="ListContent.length">
          <swiper-slide class="swiper-item" v-for="(item, index) in ListContent" :key="index">
            <img class="swiper-img" :src="item.picture" alt="" />
            <div class="text">
              <div class="text-tit">{{item.title.replace('-', '.')}}</div>
              <div class="text-con" v-html="item.description"></div>
            </div>
          </swiper-slide>
        </swiper>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
      </div>
      <div class="time-wrap">
        <span :class="['time', { actives: active == index }]" @click="didi(index)" type="primary"
          v-for="(item, index) in ListContent" :key="index">{{item.title.replace('-', '.')}}</span>
      </div>


    </div>

    <commonFooter></commonFooter>
  </div>

</template>

<script lang="ts">
  // ajax
  import { HelloChildBanner } from "@/assets/js/api";

  import { Component, Vue } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";
  @Component({
    name: "charity",
    components: {
      commonHeader,
      commonFooter,
    },
  })
  export default class charity extends Vue {

    // 头部banner
    ListBanner = [];
    // 轮播图
    ListContent = [];


    swiperOption = {
      // 参数选项,显示小点
      pagination: ".swiper-pagination",
      paginationClickable: true,
      //循环
      loop: true,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    };

    swiperOption1 = {
      // 参数选项,显示小点
      // pagination: ".swiper-pagination1",
      paginationClickable: true,
      //循环
      loop: true,
      //每张播放时长3秒，自动播放
      // autoplay: 2000,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // onSlideChangeStart: function (swiper) {
      //     that.active = swiper.realIndex;
      //     //   this.realIndex + 1
      //     console.log(swiper.realIndex);
      //   },


      on: {
        slideChangeTransitionStart: function () {
          charity.active = this.realIndex;
        }
      },

    };


    active = 0;


    get swiper(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper.$swiper;
    }

    get swiper1(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper1.$swiper;
    }


    didi(index:number) {
      this.active = index;
      this.swiper1.slideTo(index + 1, 1000, false);
    }




    mounted() {

      let parameter = {
        bannerposition: 7,
        typename: "你好惠元-慈善公益-图文管理",
      }
      HelloChildBanner(parameter).then((response: any) => {
        console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
            this.ListContent = data[0].ListContent;

            this.$nextTick(() => {
              if (this.ListBanner.length <= 1) {
                // this.swiper.autoplay.stop();
              }
            });


          }
        }
      });



    }

    // watch: {
    //   // 刷新页面
    //   $route(to, from) {
    //     this.$router.go(0)
    //   }
    // }

  }
</script>


<style lang="scss" scoped>
  @import '~@/assets/scss/charity.scss';
</style>